@import './common';

.list-item{
	margin-bottom: setSize(9);
	box-shadow:0 setSize(3) setSize(8) 0 rgba(0,0,0,0.35);

	.list-head{
		box-sizing:border-box;
		padding:setSize(8) setSize(40);
		background-color:#fff;
		border-top:setSize(2) solid #e1e1e1; 

		.icon-box{

			.icon{
				display: block;
				width: setSize(62);
				height: setSize(62);
				border-radius:50%;
			}
		}

		.text{
			box-sizing:border-box;
			padding:0 setSize(20);
			font-size: setSize(26);
			color: $mainColor;
			@include ellipsis;
		}

		.btn{
			width: setSize(100);
			line-height: setSize(36);
			border:setSize(2) solid #fe5c21;
			border-radius:setSize(100);
			font-size: setSize(26);
			color: #fe5c21;
			text-align: center;
		}

		.btn-default{
			color:#999;
			border-color:#999;
		}
	}

	.swiper{

		.img{
			display: block;
			width: 100%;
			height: setSize(360);
		}
	}

	.article{
		line-height: setSize(38);
		box-sizing:border-box;
		padding:setSize(20) setSize(40);
		font-size: setSize(28);
		color: #34393e;
		background-color:#fff;

		.flag{
			font-size: setSize(30);
			color: #ff4e00;
		}
	}

	.list-foot{
		box-sizing:border-box;
		padding:setSize(16) setSize(40);
		background-color:#fff;
		border-top: setSize(1) solid #ccc;

		.tags{

			.tag{
				display: inline-block;
				width: setSize(100);
				line-height: setSize(40);
				margin-right:setSize(16);
				border-radius:setSize(100);
				text-align: center;
				font-size: setSize(28);
				color: #333;
				background-color:$mainColor;
			}
		}

		.icon-box{
			position: relative;
			margin-right: setSize(52);
			margin-top: setSize(8);

			.icon{
				display: block;
				width: setSize(34);
				height: setSize(34);
			}

			.text{
				position:absolute;
				top:setSize(-20);
				right: setSize(-60);
				width:setSize(60);
				font-size:setSize(24);
				color: #333;
			}
		}
	}
}